<template>
    <el-dialog title="职员详情" :visible.sync="is_show" :before-close="handleClose" width="600px">
        <div class="personnel-detail clear-float" v-if="data">
            <div class="personnel-detail-left">姓名：</div>
            <div class="personnel-detail-right">{{data.name}}</div>
            <div class="personnel-detail-left">手机号码:</div>
            <div class="personnel-detail-right">{{data.mobile}}</div>
            <div class="personnel-detail-left">是否离（调）职：</div>
            <div class="personnel-detail-right">{{data.leave}}</div>
            <div class="personnel-detail-left">离调职时间：</div>
            <div class="personnel-detail-right">{{data.leaveTime}}</div>
            <div class="personnel-detail-left">离调职去向：</div>
            <div class="personnel-detail-right">{{data.leaveTo}}</div>
            <div class="personnel-detail-left">职位：</div>
            <div class="personnel-detail-right personnel-detail-height-auto">
                <div v-for="(item, index) in data.role" :key="index">{{item}}</div>
            </div>
            <div class="personnel-detail-left">部门：</div>
            <div class="personnel-detail-right personnel-detail-height-auto">
                <div v-for="(item, index) in data.department" :key="index">{{item}}</div>
            </div>
            <div class="personnel-detail-left">描述：</div>
            <div class="personnel-detail-right personnel-detail-height-auto">{{data.desc}}</div>
        </div>
    </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    name: "user-details",
    computed: {
        ...mapGetters("personnel", ["is_user_detail_dialog_show"])
    },
    props: ["data"],
    data() {
        return {
            is_show: false
        };
    },
    watch: {
        is_user_detail_dialog_show(newVal) {
            this.is_show = newVal;
        }
    },
    methods: {
        handleClose() {
            this.$store.commit(
                "personnel/CHANGE_IS_USER_DETAIL_DIALOG_SHOW",
                false
            );
        }
    }
};
</script>

<style>
.personnel-detail {
    border-top: 1px solid #ccc;
    margin-bottom: 50px;
}
.personnel-detail-left,
.personnel-detail-right {
    height: 40px;
    line-height: 40px;
    float: left;
}
.personnel-detail-left {
    width: 40%;
    text-align: right;
}
.personnel-detail-right {
    width: 50%;
    text-align: left;
    margin-left: 10%;
}
.personnel-detail-height-auto {
    height: auto;
    min-height: 40px;
}
</style>
